HAML，(HTML Abstraction Markup Language)，一個用於描述HTML的標記語言。目的在一個原則，使得標籤式語法更簡單、漂亮。如果是以Rails 開發網頁的使用者們一定對這個HAML用法不陌生。

在官網首頁裡面，有個使用範例。我們可以看到將HTML ( .erb )轉換成 HAML(.haml)語法的轉換。

簡單來說，就是將標籤以 % 以及 . 取代，可以方便我們去撰寫一份HTML文件。

利用 縮排 來將標籤式做內外包夾定義。

例如:

Hello HTML 

我們可以以HAML語法來取代達到一樣的效果

%html

    %head

    %body Hello Haml

Haml 裡面**註解**有兩種用法

<第1種>

/註解內容

使得在網頁在瀏覽器端可以看到此註解，他會轉譯成**<!--HTML註解用法-->**

<第2種>

-#註解內容

註解起來不會在網頁端顯示...

接下來我們要去設定一份HTML5 文件

Haml設定html5格式如下

<方法一> 在sinatra裡面設定方式

set :haml, :format => :html5

以下是sinatra的路由 以haml :指向目標

get '/' do

  haml :index

end

<方法二>直接在haml文件上開頭加入!!!5

!!!5

都可以達到一樣的效果

那接下來就是介紹如何傳遞參數給HAML

在sinatra裡面。

haml :test , :locals =>{:tmp => "123"}

在網頁端顯示就會成功傳遞參數

傳遞方式其實也不一定透過GET,POST ，也可以透過cookie 以及 session。

在設定session可以透過以下方式

%p{:id => "session_name"} #{session[:tmp].inspect}

用inspect 來存取session 物件的內容。

那在撰寫HTML文件時，通常會搭配使用CSS以及JavaScript

我們可以透過引用外部js .css來達到使用他們的效果

那接下來我們就來嘗試使用Haml 用法來撰寫HTML文件。

我們要來做登入介面。欄位有 帳號 以及 密碼 欄位。

這是HTML 的語法

<title>Login</title>

<form name="login" action="login" method="post">
Username:<input type="text" name="username">
</br>
Password:<input type="password" name="password">
</br>
<input type="submit" value="Login">
</form>

我們只要按照標籤的編排方式，使用haml語法縮排就可以完成一樣的效果。寫起來也相當的容易、簡單、漂亮。

!!!
%html
    %head
        %title login
    %body
        %form{:name => "login", :method => "post"}
            .username username:
            %input{:type => "text" , :name => "username"}
            .password password:
            %input{:type => "password", :name => "password"}
            %input{:type => "submit" , :value => "login"}

當然! 如果你是習慣以編輯器如:sublime這類會自動幫我們加上後括號、標籤的編輯器。

其實也是相當好用。使用純文字在編輯一份HTML文件，用HAML編寫算是相當的好用喔!

喔對了 安裝只要以下指令就可以完成囉! Rails 以及 Sinatra的使用者是相當好用的工具!

gem install haml